<template>
    <div>
        <div v-for="(item, index) in list" :key="index">
            <div class="title">
                <span>{{item.title}}</span>
            </div>
            <ul class="list">
                <li v-for="(items, indexs) in item.arr" :key="indexs">
                    <img :src="items.src" alt="">
                    <div>{{items.txt}}</div>
                </li>
            </ul>
        </div>
    </div>
</template>

<script>
export default {
    name: "MyProduct",
    props: ["list"],
    data () {
        return {
            
        }
    }
}
</script>

<style lang="less" scoped>
    .title {
        height: 100rpx;
        background: #fff;
        position: relative;
        &::before {
            content: "";
            width: 40%;
            height: 4rpx;
            background: #666;
            position: absolute;
            left: 0;
            right: 0;
            bottom: 0;
            top: 0;
            margin: auto;
        }
        span {
            width: 30%;
            height: 100rpx;
            line-height: 100rpx;
            background: #fff;
            text-align: center;
            position: absolute;
            left: 0;
            right: 0;
            bottom: 0;
            top: 0;
            margin: auto;
        }
    }

    .list {
        padding: 20rpx;
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        background: #fff;
        li {
            width: 48%;
            margin-bottom: 20rpx;
            img {
                display: block;
                width: 100%;
                height: 250rpx;
                border-radius: 6rpx;
            }
            div {
                line-height: 50rpx;
                font-size: 28rpx;
            }
        }
    }
</style>